/*
 * @Descripttion:
 * @version:
 * @Author: hejiajun
 * @Date: 2021-08-14 10:58:04
 * @LastEditors: hejiajun
 * @LastEditTime: 2021-11-02 17:33:29
 */

const { NODE_ENV } = process.env;
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const webpack = require('webpack');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

var outputDir;
var sourceMapState = false;
var productionSourceMap = true;
switch (NODE_ENV) {
    case 'sit':
        outputDir = 'sitDist';
        sourceMapState = false;
        productionSourceMap = true;
        break;
    case 'uat':
        outputDir = 'uatDist';
        sourceMapState = false;
        productionSourceMap = true;
        break;
    case 'prd':
        outputDir = 'prdDist';
        sourceMapState = false;
        productionSourceMap = false;
        break;
}
module.exports = {
    publicPath: './',
    outputDir,
    assetsDir: 'assets',
    //   devServer: {
    // https: true,
    //     proxy: {
    //         '/api': {
    //             target: '',
    //             changeOrigin: true,
    //             ws: true,
    //             pathRewrite: {
    //                 '^/api': ''
    //             },
    //             timeout: 1920000,
    //         },
    //     }, // 设置代理
    //   },
    productionSourceMap,
    configureWebpack: () => {
        const plugins = [];
        
        // 以下是打开服务器压缩
        // if (NODE_ENV !== 'prd') {
        //     plugins.push(
        //         new CompressionPlugin({
        //             filename: '[path][base].gz', // 新配置 "compression-webpack-plugin": "^6.1.1",
        //             algorithm: 'gzip',
        //             test: productionGzipExtensions, // 匹配文件名
        //             threshold: 10240, // 对超过5k的数据压缩
        //             minRatio: 0.8, //只有压缩率比这个值小的资源才会被处理
        //             deleteOriginalAssets: false, // 删除源文件
        //         })
        //     );
        // }

        return {
            plugins,
            // 以下配置拆分app.js
            optimization: {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`;
                            },
                        },
                    },
                },
            },
        };
    },
    chainWebpack: config => {
        // 按需使用lodash
        config.plugin('loadshReplace').use(new LodashModuleReplacementPlugin());

        //忽略/moment/locale下的所有文件
        config.plugin('ignore').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, 'src/assets/less/setting.less')],
        },
    },

    css: {
        sourceMap: sourceMapState, // 开启 CSS source maps 开启后 浏览器调试会出现重复样式
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        // 把px单位换算成rem单位
                        viewportWidth: 1920,
                        rootValue: 192, // 换算的基数(设计图750的根字体为75)
                        selectorBlackList: ['bg-'], // 忽略转换正则匹配项
                        unitPrecision: 2, // 保留两位小数
                        propList: ['*'], //*代表将项目中的全部进行转换，单个转换如width、height等
                        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
                    }),
                ],
            },
            less: {
                javascriptEnabled: true,
            },
        },
    },
};
